<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title></title>
	<link rel="stylesheet" href="css/easymde.min.css">
	<link rel="stylesheet" href="css/font-awesome.css">
	<link rel="stylesheet" href="css/highlight.css">
	<link rel="stylesheet" href="css/vant.css"></link>
	<script src="js/easymde.min.js"></script>
	<script src="js/highlight.js"></script>
	<style>
		* {
			margin:0;
			padding:0;
			box-sizing: border-box;
		}
		body{
			box-sizing: border-box;
		}
		#app {
			padding-bottom: 50px;
			padding-top: 16px;
		}
		.editor-statusbar .words:before {
			content: '字数: ';
		}
		.editor-statusbar .lines:before {
		    content: '行数: ';
		}
		.editor-toolbar,
		.EasyMDEContainer .CodeMirror{
			border: none;
		}
		.topic__input,
		.topic__select{
			border: none;
			border-bottom: solid 1px #ddd;
			outline: none;
			height: 32px;
			display: block;
			width: calc(100% - 32px);
			background-color: #fff;
			margin: 0 16px;
		}
		.topic__select {
			margin-top: 16px;
		}
		.topic__footer {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			height: 50px;
			box-shadow: 0px 0px 8px 0px #ebedf5;
			background-color: #fff;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-around;
		}
		.topic__footer-button {
			background-color: rgba(255,204,0, 0.1);
			width: 140px;
			height: 32px;
			color: #FFCC00;
			font-size: 14px;
			border: solid 1px #FFCC00;
			font-weight: 500;
			border-radius: 6px;
		}
		.topic__footer-save {
			background-color: #FFCC00;
			color: #fff;
		}
	</style>
	<script src="js/vue.min.js"></script>
	<script src="js/axios.js"></script>
	<script src="js/uni.webview.js"></script>
	<script src="js/vant.js"></script>
</head>
<body>
	<div id="app">
		<input type="text" placeholder="请输入标题..." v-model="title" class="topic__input" />
		<!-- <select class="topic__select" v-model="tab">
			<option value="ask">问答</option>
			<option value="share">分享</option>
			<option value="job ">招聘</option>
			<option value="dev">开发</option>
		</select> -->
		<div select class="topic__select" @click="show = !show" title="选择主题发布类型">{{tabText}}</div>
		
		
		
		<textarea ref="textArea" v-model="content"></textarea>
		<div class="topic__footer">
			<button @click="handlePreviewClick" class="topic__footer-button">预览</button>
			<button @click="handleSaveClick" class="topic__footer-button topic__footer-save">保存</button>
		</div>
		<van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
	</div>
	<script>
		const request = axios.create({
		  baseURL: 'https://cnodejs.org/api/v1'
		});
		const urlSearchParams = new URLSearchParams(window.location.search)
		const token = urlSearchParams.get('token')
		const topicId = urlSearchParams.get('topicId')
		
		var app = new Vue({
			el: '#app',
			data: function(){
				return {
					show: false,
					actions:[
						{ name: '问答', value: 'ask' },
						{ name: '分享', value: 'share' }, 
						{ name: '招聘', value: 'job' }, 
						{ name: '开发', value: 'dev' }
					],
					title: '',
					tab: 'dev',
					content: ''
				}
			},
			mounted(){
				this.easyMDE = new EasyMDE({
					autoDownloadFontAwesome:false,
					placeholder: '说点什么吧...',
					toolbar: ['bold', 'italic', 'strikethrough', 'heading', 'heading-smaller', 'heading-1', 'heading-2', 'heading-3', 'heading-3', 'code'
					, 'quote', 'unordered-list', 'ordered-list', 'clean-block', 'horizontal-rule', 'preview', 'undo', 'redo'
					],
					minHeight: "350px",
					maxHeight: "350px",
					renderingConfig: {
						codeSyntaxHighlighting:true
					},
					element: this.$refs.textArea
				});
							
			},
			computed:{
				tabText(){
					return this.actions.find(i =>i.value == this.tab).name
				}
			},
			methods: {
				onSelect(item){
					this.tab = item.value
					this.show = !this.show
				},
				handlePreviewClick(){
					this.easyMDE.togglePreview()
				},
				handleSaveClick() {
					if(!token) {
						vant.Toast('请登录');
						return 
					}
		
					const content = this.easyMDE.value();
					const params = {
						content: content,
						title: this.title,
						tab: this.tab,
						accesstoken :token
					};
					request({
						url: '/topics',
						method: 'POST',
						data: params
					}).then((ret) => {
						if(ret.data.success) {
							uni.postMessage({
								data:{
									type: 'success'
								},	
							})
						}
					})
				}
			},
		})
	
	</script>
</body>
</html>